<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>${title} - Tiny Knowledge Base - ${title}</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css" />
    <link rel="stylesheet" href="/static/css/custom.css" />
    <script type="text/javascript" src="/static/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $('.dropdown-toggle').dropdown();
    </script>
</head>
<body>
    <div class="navbar-fixed-top navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="/${customer.domain}">${customer.name}</a>
                <div class="nav-collapse">
% if roots:
                    <ul id="ul-nav-root" class="nav">
    % for r in roots:
        <% css = 'active' if root and r.id==root.id else 'None' %>
        % if r.private:
                        <li class="${css}"><a href="/${customer.domain}/doc/${r.id}/"><i class="icon-white icon-lock"></i> ${r.title}</a></li>
        % else:
                        <li class="${css}"><a href="/${customer.domain}/doc/${r.id}/">${r.title}</a></li>
        % endif
    % endfor
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">New Tree</a></li>
                                <li><a href="#">Buy</a></li>
                                <li><a href="#">Register</a></li>
                                <li class="divider"></li>
                                <li class="nav-header">Administration</li>
                                <li><a href="#">Users</a></li>
                                <li><a href="#">Settings</a></li>
                            </ul>
                        </li>
                    </ul>
% endif
                    <form class="navbar-search pull-left" action="/${customer.domain}/search">
                        <input type="text" class="input-medium search-query" placeholder="Search">
                    </form>
                    <ul class="nav pull-right">
% if user:
                        <li><img src="${user.picture}" style="height:30px;margin-top:5px;" /></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">${user.name} <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li class="nav-header">${user.email}</li>
                                <li><a href="/auth_customer?id=${user.customer_id}">Home</a></li>
                                <li><a href="#">New Tree</a></li>
                                <li><a href="/setting">Knowledge Base Settings</a></li>
                                <li><a href="https://www.google.com/settings/" target="_blank">Account Settings</a></li>
                                <li class="divider"></li>
                                <li><a href="/auth_signout">Sign Out</a></li>
                            </ul>
                        </li>
% else:
                        <li><a href="/auth_signin">登录</a></li>
% endif
                    </ul>
                </div>
            </div>
        </div>
    </div><!-- navbar -->

    <div class="container">
        <div class="row">
            <div class="span12" style="height:60px;">&nbsp;</div>
        </div>
% if root:
        <div class="row">
            <div class="span3">
                <div class="well" style="padding:8px 0">
                    <ul class="nav nav-list">
                        <li class="nav-header">Index</li>
${func_render_node(customer.domain, root, node.id, 0)}
                        <li class="nav-header">Copyright&copy;</li>
                    </ul>
                </div>
            </div>
            <div class="span9">
                <div id="active-node">
<!-- BEGIN include -->
<%include file="${__include__}"/>
<!-- END include -->
                </div>
            </div>
        </div>
% else:
        <div id="single">
            <div class="row">
<!-- BEGIN include -->
<%include file="${__include__}"/>
<!-- END include -->
            </div>
        </div>
% endif
        <footer class="footer">
            <hr />
            <div style="margin:12px 24px">
                <p class="pull-right"><a href="http://code.google.com/p/tinykb/" target="_blank">About</a></p>
                <p><a href="${customer.url}" target="_blank">${customer.name}</a></p>
                <p>Tiny KB &copy;2010-2012. A tiny, fast knowledge base.</p>
            </div>
        </footer>
    </div>
</body>
</html>
